<template>
	<view class="u-page">
		<view class="u-dark-block"  v-if="!!userinfo.realname">
			<div class="u-info" >
				<u-row>
					<u-col span="12">
						<span class="name">{{userinfo.realname}}</span>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="6">
						<span>{{userinfo.email}}</span>
					</u-col>
				</u-row>
			</div>
			<u-line></u-line>
		</view>
		<!--  消息订阅组件 -->
		<view class="message_subscription btn-group"v-if="!!userinfo.realname">
			<u-cell-group class="btn-group" >
				<u-cell title="个人信息" :icon="iconInfoURL" @click="btnClick('userinfo')"></u-cell>
				<u-cell title="密码修改" :icon="iconPasswordURL" @click="btnClick('password')"></u-cell>
				<u-cell title="退出登录" :icon="iconLogoutURL"  @click="btnClick('logout')"></u-cell>
			</u-cell-group>
		</view>
		
		<view class="u-dark-block" v-if="!userinfo.realname">
			<div class="u-info" >
				<u-row>
					<u-col span="12">
						<span class="name" @click="login()">点击登录</span>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="6">
						<span>{{userinfo.email}}</span>
					</u-col>
				</u-row>
			</div>
			<u-line></u-line>
		</view>
	</view> 
</template>
3222
<script>
	import {
		UserService
	} from '../../request/api-package.js'
	import AuthService from '../../request/auth.service.js'
	export default {
		name: 'messageSubscription',

		components: {},
		data() {
			return {
				userinfo:{},
				iconCheckURL: "/static/icon/check.svg",
				iconNoticeURL: "/static/icon/notice.svg",
				iconTodoURL: "/static/icon/todo.svg",
				iconInfoURL: "/static/icon/info.svg",
				iconBindURL: "/static/icon/bind.svg",
				iconPasswordURL: "/static/icon/password.svg",
				iconLogoutURL: "/static/icon/logout.svg",
				type:"",
				countTask: 0,
				incompleteNum: 0,
				noticeNum: 0,
				linkWidth: 6,
			}
		},
		onShow() {
			this.getUserInfo()
			console.log("userinfo.realname"+this.userinfo.realname);
		},
		activated() {
			this.getUserInfo()
		},

		methods: {
			login(){
				var that = this;
				wx.login({
				  success (res) {
				    if (res.code) {
				     UserService.login({code:res.code}).then((res) => {
						 if(res.data.success){
							 AuthService.setUserinfo({
								info: res.data.result
							});
							 that.getUserInfo();
						 }
					 }).catch((res) => {
						 console.log(res)
					 })
				    } else {
				      console.log('登录失败！' + res.errMsg)
				    }
				  }
				})
			},
			getUserInfo(){
				let userinfo = AuthService.getUserinfo().info
				this.userinfo = userinfo
				console.log("userinfo"+this.userinfo);
				// if (this.userinfo.roleStatus === "2") this.linkWidth = 4 
				// else this.linkWidth = 6
			},
			
			btnClick (type) {
				if (type === "userinfo") {
					uni.navigateTo({
						url: '/subPageme/userInfo/userInfo'
					})
				} else if (type === "password") {
					uni.navigateTo({
						url: '/subPageme/password/password'
					})
				} else if (type === "logout") {
					uni.showModal({
							title: '提示',
							content: '确定要退出登录吗？',
							success: function(res) {
							if (res.confirm) {
							    // 执行确认后的操作
								AuthService.logout()
							}
							else {
								// 执行取消后的操作
							}
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	$gray: #d8d8d8;
	$white: #ffffff;
	$red: #d92929;
	$defaultBackground: #051A2E;

	.u-dark-block {
		height: 125px;
		background-color: $defaultBackground;
		color: $gray;
		padding: 15px 25px 10px;

		.u-info {
			height: 100px;
			span {
				color: $gray;
				display: block;
				text-align: left;
			}

			.name {
				color: $white;
				font-size: 26px;
				line-height: 50px;
			}

			.u-id {
				text-align: right;
			}
		}

		.link-group {
			/deep/ .u-row {
				padding-top: 20px;
			}
			/deep/ .u-badge {
				position: relative !important;
				left: 65px;
				bottom: 50px;
				width: fit-content;
				background: $red;
			}
			span {
				font-size: 14px;
				text-align: center;
			}

		}
	}


	.btn-group {
		width: 90%;
		margin: 30px auto;
		background: $white;
		border-radius: 5px;

		/deep/ .u-cell__title-text {
			color: #2f3237;
			font-size: 14px;
			margin-left: 10px;
		}
	}
</style>
